<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="菜单管理"/>
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item v-if="dict.sys_normal_disable" label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
          <el-option
            v-for="dd in dict.sys_normal_disable.dictData"
            :key="dd.dictCode"
            :label="dd.dictLabel"
            :value="dd.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="toggleExpandAll"
        >展开/折叠
        </el-button>
      </el-col>
      <el-row type="flex" justify="end">
        <right-toolbar :show-search.sync="showSearch" @queryTable="getList"/>
      </el-row>
    </el-row>

    <!--    <el-table-->
    <!--      v-if="menuList"-->
    <!--      :data="menuList"-->
    <!--      style="width: 100%;margin-bottom: 20px;"-->
    <!--      row-key="menuId"-->
    <!--      :default-expand-all="isExpandAll"-->
    <!--      :tree-props="{children: 'menus'}">-->
    <!--      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>-->
    <!--      <el-table-column prop="menuId" label="菜单编号" :show-overflow-tooltip="true" width="160"></el-table-column>-->
    <!--    </el-table>-->

    <el-table
      v-if="refreshTable"
      v-loading="loading"
      :data="menuList"
      row-key="menuId"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'menus'}"
    >
      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"/>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <i :class="scope.row.icon"/>

        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="60"/>
      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"/>
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"/>
      <el-table-column prop="status" label="状态" width="80">
        <template v-if="dict.sys_normal_disable" slot-scope="scope">
          <el-tag :options="dict.sys_normal_disable">{{ scope.row.status==0?'正常':'停用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width ">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
          >新增
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <treeselect
                v-model="form.parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != 'F'" :span="24">

            <el-form-item
              v-if="form.menuType != 'F'"
              label="菜单图标"
              prop="icon"
            >
              <e-icon-picker v-model="form.icon"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != 'F'" :span="12">
            <el-form-item>
              <span slot="label">
                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                是否外链
              </span>
              <el-radio-group v-model="form.isFrame">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != 'F'" :span="12">
            <el-form-item prop="path">
              <span slot="label">
                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                路由地址
              </span>
              <el-input v-model="form.path" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType == 'C'" :span="12">
            <el-form-item prop="component">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model="form.component" placeholder="请输入组件路径"/>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != 'M'" :span="12">
            <el-form-item>
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100"/>
              <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>

          <el-col v-if="form.menuType == 'C'" :span="12">
            <el-form-item>
              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255"/>
              <span slot="label">
                <el-tooltip content="访问路由的默认传递参数，如：`{&quot;id&quot;: 1, &quot;name&quot;: &quot;ry&quot;}`"
                            placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                路由参数
              </span>
            </el-form-item>
          </el-col>

          <el-col v-if="form.menuType != 'F'" :span="12">
            <el-form-item v-if="dict.sys_show_hide">
              <span slot="label">
                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                显示状态
              </span>
              <el-select v-model="form.visible">
                <el-option
                  v-for="dd in dict.sys_show_hide.dictData"
                  :key="dd.dictId"
                  :value="dd.dictValue"
                  :label="dd.dictLabel"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-if="form.menuType != 'F'" :span="12">
            <el-form-item v-if="dict.sys_normal_disable">
              <span slot="label">
                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                菜单状态
              </span>
              <el-select v-model="form.status">
                <el-option
                  v-for="dd in dict.sys_normal_disable.dictData"
                  :key="dd.dictId"
                  :value="dd.dictValue"
                  :label="dd.dictLabel"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-if="form.menuType == 'C'" :span="12">
            <el-form-item>
              <span slot="label">
                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                  <i class="el-icon-question"/>
                </el-tooltip>
                是否缓存
              </span>
              <el-radio-group v-model="form.isCache">
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: 'Index',

        data() {
            return {
                // 遮罩层
                loading: true,

                dicts: ['sys_show_hide', 'sys_normal_disable'],
                dict: [],

                // 显示搜索条件
                showSearch: true,
                // 菜单表格树数据
                menuList: [],
                menus: [],

                // 菜单树选项
                menuOptions: [],
                menuTree: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                // 是否展开，默认全部折叠
                isExpandAll: false,
                // 重新渲染表格状态
                refreshTable: true,
                // 查询参数
                queryParams: {
                    menuName: null,
                    status: null
                },
                // 表单参数
                form: {
                    menuId: '',
                    parentId: 0,
                    menuName: '',
                    icon: '',
                    menuType: 'M',
                    orderNum: undefined,
                    isFrame: 0,
                    isCache: 0,
                    visible: '0',
                    status: '0',
                    perms: ''
                },
                // 表单校验
                rules: {
                    menuName: [
                        {required: true, message: '菜单名称不能为空', trigger: 'blur'}
                    ],
                    orderNum: [
                        {required: true, message: '菜单顺序不能为空', trigger: 'blur'}
                    ],
                    path: [
                        {required: true, message: '路由地址不能为空', trigger: 'blur'}
                    ]
                }
            }
        },

        created() {
            this.getList()
            this.getDictData()
            this.getMenuTree();
        },
        methods: {
            // 选择图标
            selected(name) {
                this.form.icon = name
            },
            /** 查询菜单列表 */
            getList() {
                this.loading = true
                console.log(this.queryParams)
                this.axios.post('http://localhost:8080/menu/menus?', this.qs.stringify(this.queryParams))
                    .then(res => {
                        console.log(res.data)
                        this.menuList = res.data
                        this.menus = res.data
                        this.loading = false
                    })
                // listMenu(this.queryParams).then(response => {
                //     this.menuList = this.handleTree(response.data, "menuId");
                //     this.loading = false;
                // });
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children
                }
                return {
                    id: node.menuId,
                    label: node.menuName,
                    children: node.menus
                }
            },
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                this.getMenuTree();
                const menu = {menuId: 0, menuName: '主类目', menus: []};
                menu.menus = this.menuTree;
                this.menuOptions = [];
                this.menuOptions.push(menu);
                // listMenu().then(response => {
                //     this.menuOptions = [];
                //     const menu = { menuId: 0, menuName: '主类目', children: [] };
                //     menu.children = this.handleTree(response.data, "menuId");
                //     this.menuOptions.push(menu);
                // });
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.reset()
            },
            // 表单重置
            reset() {
                this.form = {
                    menuId: undefined,
                    parentId: 0,
                    menuName: undefined,
                    icon: undefined,
                    menuType: 'M',
                    orderNum: undefined,
                    isFrame: '1',
                    isCache: '0',
                    visible: '0',
                    status: '0'
                }
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.cleanSearch()
                this.handleQuery()
            },
            /** 新增按钮操作 */
            handleAdd(row) {
                this.reset()
                this.getTreeselect()
                if (row != null && row.menuId) {
                    this.form.parentId = row.menuId
                } else {
                    this.form.parentId = 0
                }
                this.open = true
                this.title = '添加菜单'
            },
            /** 展开/折叠操作 */
            toggleExpandAll() {
                this.refreshTable = false
                this.isExpandAll = !this.isExpandAll
                this.$nextTick(() => {
                    this.refreshTable = true
                })
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset()
                this.getTreeselect()
                this.open = true
                this.title = '修改菜单'
                this.form = row
                // getMenu(row.menuId).then(response => {
                //     this.form = response.data
                //
                // })
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.menuId != undefined) {
                            this.axios.put("/menu/menu/", this.form)
                                .then(res => {
                                    console.log(this.form)
                                    if (res.data == "修改成功") {
                                        this.$message({
                                            message: '恭喜你，修改成功',
                                            type: 'success'
                                        });
                                        this.open = false;
                                        this.getList()
                                    }
                                })
                        } else {
                            console.log(this.form)
                            this.axios.post("/menu/menu/", this.qs.stringify(this.form))
                                .then(res => {
                                    if (res.data == "添加成功") {
                                        this.$message({
                                            message: '恭喜你，添加成功',
                                            type: 'success'
                                        });
                                        this.open = false;
                                        this.getList()
                                    }
                                })
                            // addMenu(this.form).then(response => {
                            //     this.$modal.msgSuccess('新增成功')
                            //     this.open = false
                            //     this.getList()
                            // })
                        }
                    }
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                if (confirm('是否确认删除名称为"' + row.menuName + '"的数据项？')) {
                    this.axios.delete("/menu/menu?id="+row.menuId)

                        .then(res => {
                            if (res.data == "删除成功") {
                                this.$message({
                                    message: '恭喜你，删除成功',
                                    type: 'success'
                                });
                                this.getList()
                            }
                        })

                }

            },
            getOpenDetail(row, column, event) {
                if (event.currentTarget.querySelector('.el-table__expand-icon')) {
                    event.currentTarget.querySelector('.el-table__expand-icon').click()
                }
            },
            getDictData() {
                this.axios.get('http://localhost:8080/dict/maps/' + this.dicts.join())
                    .then(res => {
                        this.dict = res.data
                    })
            },
            getMenuTree() {
                this.axios.post('http://localhost:8080/menu/menus')
                    .then(res => {
                        this.menuTree = res.data
                        console.log("----------")
                        console.log(this.menuTree)
                    })
            },
            // 清空查询框数据
            cleanSearch() {
                this.queryParams.status = null, // 搜索框菜单状态
                    this.queryParams.menuName = null
            }

        }
    }
</script>

<style scoped>
  .el-alert {
    margin-bottom: 20px;
  }

  .el-table-column {
    height: 30px;
  }

  .el-table {
    margin-top: 20px;
  }

  .el-table .el-button {
    padding: 7px 0px;
  }

</style>
